@extends('admin.main')
@section('head')
    <link href="/static/datetimepicker/css/datetimepicker.css" rel="stylesheet" type="text/css">
    @if(C('COLOR_STYLE')=='blue_color') <link href="/static/datetimepicker/css/datetimepicker_blue.css" rel="stylesheet" type="text/css">'@endif
    <link href="/static/datetimepicker/css/dropdown.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/static/datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="/static/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <style>
        .ncsc-default-table {
            line-height: 20px;
            width: 100%;
            border-collapse: collapse;
            clear: both;
        }
        tbody {
            display: table-row-group;
            vertical-align: middle;
            border-color: inherit;
        }
        thead {
            display: table-header-group;
            vertical-align: middle;
            border-color: inherit;
        }
        tr {
            display: table-row;
            vertical-align: inherit;
            border-color: inherit;
        }
        .ncsc-default-table thead th {
            line-height: 20px;
            /*color: #999;*/
            /*background-color: #FFF;*/
            text-align: center;
            height: 20px;
            padding: 8px 0;
            border-bottom: solid 1px #DDD;
        }
        .w10 {
            width: 10px;
        }
        .w100 {
            width: 100px !important;
        }
        .w40 {
            width: 40px !important;
        }
        .w60 {
            width: 60px !important;
        }
        .w90 {
            width: 90px;
        }
        .w120 {
            width: 120px !important;
        }
        .order tbody tr td.sep-row {
            height: 12px;
            padding: 0;
            border: 0;
        }
        .order tbody tr td.sep-row { height:12px; padding:0; border:0;background-color: #F6F6F6;}
        .order tbody tr th { border: solid 1px #DDD; }
        .order tbody tr th h3 { font-size: 12px; line-height: 20px; font-weight: bold; color: #555; vertical-align: middle; display: inline-block; margin: 0 10px;}
        .order tbody tr th time { font-size: 11px; line-height: 20px; color: #999; vertical-align: middle; display: inline-block; margin-right: 20px; -webkit-text-size-adjust:none;}
        .order tbody tr th time i { font-size: 12px; margin-right: 4px;}
        .order tbody tr td { border-bottom: 1px solid #E6E6E6; vertical-align: top; }
        .order tbody tr td.bdl { border-left: 1px solid #E6E6E6; }
        .order tbody tr td.bdr { border-right: 1px solid #E6E6E6; }
        .order .norecord {border-bottom:0 !important;}
        .order .buyer { color: #555; position:relative; display:block; }
        .order .buyer-info { display:none; }
        .order .buyer:hover .buyer-info { *width:250px/*IE7*/; display:block; position:absolute; z-index:8; top:-40px; left: 90px; border: solid 1px #FEC500; background-color:#FFF9D4; padding:4px; border-radius:5px;}
        .order .buyer-info em {  width: 8px; height: 14px; position: absolute; z-index: 9; top: 37px; left:-8px;}
        .order .buyer-info .con { display:block; overflow:hidden; background: #FFF; padding:5px;}
        .order .buyer-info h3 { font-size:1em; font-weight:700; color: #C33700; padding: 5px 0; overflow:hidden;}
        .order .buyer-info h3 i { width: 17px; height: 11px; float:left; margin: 5px 5px 4px 12px;}
        .order .buyer-info h3  span { float:left;}
        .order .buyer-info dl { color: #777; padding:2px 0; width:220px; overflow:hidden; clear:both;}
        .order .buyer-info dt { float:left; width:50px; text-align:right;}
        .order .buyer-info dd { float:left; width:140px; text-align:left;}
        .ncsc-default-table tbody th span {
            display: inline-block;
            vertical-align: middle;
            margin-right: 30px;
        }
        .ml10 {
            margin-left: 10px!important;
        }
        .ncsc-default-table tbody th span {
            display: inline-block;
            vertical-align: middle;
            margin-right: 30px;
        }
        /* 隔行变色 行默认颜色 */
        .table-striped tbody tr {
            background-color: #f2f2f2;
            color: #686868;
        }
        /* 隔行变色 偶数行配色 */
        .table-striped tbody tr:nth-child(even) {
            background-color: #fefefe;

        }
        .order tbody tr th {
            border: solid 1px #DDD;
        }
        .ncsc-default-table tbody th {
            background-color: #FAFAFA;
            border: solid #E6E6E6;
            border-width: 1px 0;
            padding: 4px 0;
        }
        caption, th {
            text-align: left;
        }
        i, cite, em {
            font-size: 1em;
            font-style: normal;
            font-weight: normal;
        }
        .ncsc-default-table tbody td {
            color: #999;
            background-color: #FFF;
            text-align: center;
            padding: 10px 0;
        }
        .order tbody tr td.bdl {
            border-left: 1px solid #E6E6E6;
        }
        .order tbody tr td {
            border-bottom: 1px solid #E6E6E6;
            vertical-align: top;
        }
        .ncsc-order-amount {
            font: bold 12px/20px Verdana;
            color: #C00;
        }
        a.ncbtn-bluejeansjeans {
            background-color: #5D9CEC;
        }
        a.ncbtn-greenjeansjeans {
            background-color: green;
        }
        a.ncbtn-mini {
            line-height: 16px;
            height: 16px;
            padding: 3px 7px;
            border-radius: 2px;
        }
        a.ncbtn-mini, a.ncbtn {
            font: normal 12px/20px "microsoft yahei", arial;
            color: #FFF;
            background-color: #CCD0D9;
            text-align: center;
            vertical-align: middle;
            display: inline-block;
            height: 20px;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
        .order tbody tr td.bdr {
            border-right: 1px solid #E6E6E6;
        }
        .order tbody tr td.bdl {
            border-left: 1px solid #E6E6E6;
        }
        .order tbody tr td {
            border-bottom: 1px solid #E6E6E6;
            vertical-align: top;
        }
        .ncsc-default-table tbody td {
            color: #999;
            background-color: #FFF;
            text-align: center;
            padding: 10px 0;
        }
        a.ncbtn-grapefruit {
            background-color: #ED5564;
        }
        a.ncbtn {
            height: 16px;
            padding: 5px 10px;
            border-radius: 3px;
        }
        a.ncbtn-bluejeansjeans {
            background-color: #5D9CEC;
        }
        a.ncbtn-mini {
            line-height: 16px;
            height: 16px;
            padding: 3px 7px;
            border-radius: 2px;
        }
    </style>
@endsection
@section('body')
    <!-- 标题栏 -->
    <div class="main-title">
        <h2>水票订单列表 [ <span style="color: red">{{$listType[request('type',0)]}} </span> ]</h2>
    </div>
    <div class="cf">
        <div class="fl">
            <a class="btn" href="{{urlAdmin('waterBillOrder','getIndex',['shop_id'=>request('shop_id'),'type'=>0])}}">全  部</a>
            <a class="btn" href="{{urlAdmin('waterBillOrder','getIndex',['shop_id'=>request('shop_id'),'type'=>1])}}">已付款</a>
            <a class="btn" href="{{urlAdmin('waterBillOrder','getIndex',['shop_id'=>request('shop_id'),'type'=>2])}}">未付款</a>
            <a class="btn" href="{{urlAdmin('waterBillOrder','getIndex',['shop_id'=>request('shop_id'),'type'=>3])}}">微信支付</a>
            <a class="btn" href="{{urlAdmin('waterBillOrder','getIndex',['shop_id'=>request('shop_id'),'type'=>4])}}">货到付款</a>
        </div>
        <!-- 高级搜索 -->
        <div class="search-form fr cf">
            <div class="sleft">
                <div class="drop-down" style="width: 200px;">
                    <span id="sch-sort-txt" class="sort-txt" style="width: 170px;" data="{{request('shop_id')}}">@if(!request('shop_id')) 全部 @else{{$curentShop['shop_name']}}@endif</span>
                    <i class="arrow arrow-down"></i>
                    <ul id="sub-sch-menu" class="nav-list hidden">
                        <li><a href="javascript:;" style="width: 170px;" value="">全部</a></li>
                        @if(count($shopList))
                            @foreach($shopList as $v)
                                <li><a href="javascript:;" style="width: 170px;" value="{{$v['id']}}">{{$v['shop_name']}}</a></li>
                            @endforeach
                        @endif
                    </ul>
                </div>
                <input type="text" name="keyword" class="search-input" value="{{request('keyword')}}"
                       placeholder="请输入订单号">
                <a class="sch-btn" href="javascript:;" id="search" url="{{urlAdmin('waterBillOrder','getIndex')}}"><i
                            class="btn-search"></i></a>
            </div>
            <div class="btn-group-click adv-sch-pannel fr">
                <button class="btn">高 级<i class="btn-arrowdown"></i></button>
                <div class="dropdown cf">
                    <div class="row">
                        <label>下单时间：</label>
                        <input type="text" id="time-start" name="time-start" class="text input-2x" value="{{request('time-start')}}" placeholder="起始时间" /> -
                        <input type="text" id="time-end" name="time-end" class="text input-2x" value="{{request('time-end')}}" placeholder="结束时间" />
                    </div>
                    <div class="row">
                        <label>买家：</label>
                        <input type="text" name="buyer_name" class="text input-2x" value="{{request('buyer_name')}}" placeholder="请输入买家姓名">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 数据列表 -->
    <div class="data-table table-striped">
        <table class="ncsc-default-table order">
            <thead>
            <tr>
                <th class="w10"></th>
                <th colspan="2">商品</th>
                <th class="w100">单价（元）</th>
                <th class="w40">总数量</th>
                <th class="w100">买家</th>
                <th class="w100">订单金额</th>
                <th class="w100">套餐名</th>
                <th class="w40">购买数量</th>
                <th class="w40">赠送数量</th>
                <th class="w90">交易状态</th>
                {{--<th class="w40">配送员</th>--}}
                {{--<th class="w120">交易操作</th>--}}
            </tr>
            </thead>
            @if(count($rows['data']))
            @foreach($rows['data'] as $v)
            <tbody id="row_{{$v['id']}}">
            <tr><td colspan="20" class="sep-row"></td></tr>
            <tr>
                <th colspan="20">
                    <span class="ml10">订单编号：<em>{{$v['order_sn']}}</em><i class="icon-mobile-phone"></i></span>
                    <span>下单时间：<em class="goods-time">{{$v['created_at']}}</em></span>
                </th>
            </tr>
            <tr>
                <td class="bdl"></td>
                <td class="w120">
                    <div class="ncsc-goods-thumb">
                        <img src="/uploads/goods/imgs/{{$v['admin_id']}}/{{$v['goods_id']}}_1_{{$mini}}.{{$ext}}?{{time()}}" >
                    </div>
                </td>
                <td class="tl" style="width: 35%">
                    <dl class="goods-name">
                        <dt style="color:#333;">{{$v['goods_name']}}</dt>
                    </dl>
                </td>
                <td><p>{{$v['goods_price']}}</p></td>
                <td>x {{$v['total_num']}}</td>
                <td class="bdl">
                    <div class="buyer">{{$v['address'] ? $v['address']['name'] : ''}}
                        <p member_id="{{$v['mid']}}"></p>
                        <div class="buyer-info">
                            <em></em>
                            <div class="con">
                                <h3><i></i><span>联系信息</span></h3>
                                <dl>
                                    <dt>姓名：</dt>
                                    <dd>{{$v['address'] ? $v['address']['name'] : ''}}</dd>
                                </dl>
                                <dl>
                                    <dt>电话：</dt>
                                    <dd>{{$v['address'] ? $v['address']['mobile'] : ''}}</dd>
                                </dl>
                                <dl>
                                    <dt>地址：</dt>
                                    <dd>{{$v['address'] ? $v['address']['area_info'].' '.$v['address']['address'] : ''}}</dd>
                                </dl>
                            </div>
                        </div>
                    </div>
                </td>
                <td class="bdl bdr">
                    <p class="ncsc-order-amount">{{$v['order_amount']}}</p>
                    @if($v['type'] == 1)
                        <p class="goods-pay" title="支付方式：货到付款" style="color:orange">货到付款</p>
                    @elseif($v['type'] == 0)
                        <p class="goods-pay" title="支付方式：微信支付" style="color:green">微信支付</p>
                    @endif

                </td>
                <td class="w60 bdr">{!! $v['title'] !!}</td>
                <td class="w60 bdr">{{$v['buy_num']}}</td>
                <td class="w60 bdr">{{$v['gift_num']}}</td>
                <td class="bdl bdr">
                    <p style="color:@if($v['pay_status'] == 10) red @else blue @endif">{{$v['pay_status_text']}}</p>
                    {{--<p><a href="javascript:;">订单详情</a></p>--}}
                    {{--<p style="color:@if($v['dispatch'] == -1) orange @endif">@if($v['dispatch']){{$v['dispatch_text']}}@endif</p>--}}
                </td>
                {{--<td class="w60 bdr">@if(isset($v['worker'])) {{$v['worker']['name']}} @else --- @endif</td>--}}
                {{--<td class="bdl bdr">--}}
                    {{--@if($v['pay_status'] == 10)--}}
                        {{--<p><a href="{{urlAdmin('waterBillOrder','getDeleteOrder',['id'=>$v['id']])}}" class="ncbtn-mini mt5 ajax-get">取消订单</a></p>--}}
                    {{--@endif--}}
                {{--</td>--}}
            </tr>
            </tbody>
                @endforeach
            @else
                <td colspan="12" class="text-center"> aOh! 暂时还没有内容!</td>
            @endif
        </table>
    </div>
    <div class="page">
        @if($rows['last_page']>1)
            <div>
                <a class="first" href="{{urlAdmin('waterBillOrder','getIndex',['page'=>1])}}&type={{request('type',0)}}">首页</a>
                @if($rows['prev_page_url'])
                    <a class="prev" href="{{$rows['prev_page_url']}}&type={{request('type',0)}}">&lt;&lt;</a>
                @endif
                @if(count($rows['pageNoList']))
                    @foreach($rows['pageNoList'] as $v)
                        @if($rows['current_page'] == $v)
                            <span class="current">{{$v}}</span>
                        @else
                            <a class="num" href="{{urlAdmin('waterBillOrder','getIndex',['page'=>$v,'type'=>request('type',0)])}}">{{$v}}</a>
                        @endif
                    @endforeach
                @endif
                @if($rows['next_page_url'])
                    <a class="next" href="{{$rows['next_page_url']}}&type={{request('type',0)}}">&gt;&gt;</a>
                @endif
                <a class="last" href="{{urlAdmin('waterBillOrder','getIndex',['page'=>$rows['last_page']])}}&type={{request('type',0)}}">末页</a>
                <span class="rows">共 {{$rows['total']}} 条记录</span>
            </div>
        @endif
    </div>
@endsection

@section('script')
    <script type="text/javascript">

        {{--function cancle(id) {--}}
            {{--layer.open({--}}
                {{--type: 2,--}}
                {{--title:'取消订单',--}}
                {{--area: ['600px', '200px'],--}}
                {{--fixed: false, //不固定--}}
                {{--maxmin: true,--}}
                {{--content: '{{urlAdmin('waterBillOrder','getCancle')}}?id='+id--}}
            {{--});--}}
        {{--}--}}


        //搜索功能
        $("#search").click(function(){
            var url = $(this).attr('url');
            var shop_id = $("#sch-sort-txt").attr("data");
            var query  = $('.search-form').find('input').serialize();
            query = query.replace(/(&|^)(\w*?\d*?\-*?_*?)*?=?((?=&)|(?=$))/g,'');
            query = query.replace(/^&/g,'');
            if(shop_id != ''){
                query = 'shop_id=' + shop_id + "&" + query;
            }
            if( url.indexOf('?')>0 ){
                url += '&' + query;
            }else{
                url += '?' + query;
            }
            window.location.href = url;
        });

        /* 状态搜索子菜单 */
        $(".search-form").find(".drop-down").hover(function(){
            $("#sub-sch-menu").removeClass("hidden");
        },function(){
            $("#sub-sch-menu").addClass("hidden");
        });
        $("#sub-sch-menu li").find("a").each(function(){
            $(this).click(function(){
                var text = $(this).text();
                $("#sch-sort-txt").text(text).attr("data",$(this).attr("value"));
                $("#sub-sch-menu").addClass("hidden");
                var shop_id = $(this).attr("value");
                if (shop_id) {
                    window.location.href = '{{urlAdmin('waterBillOrder','getIndex')}}?shop_id=' + shop_id;
                    return;
                }
                window.location.href = '{{urlAdmin('waterBillOrder','getIndex')}}';
            })
        });
        //回车自动提交
        $('.search-form').find('input').keyup(function(event){
            if(event.keyCode===13){
                $("#search").click();
            }
        });

        $('#time-start').datetimepicker({
            format: 'yyyy-mm-dd',
            language:"zh-CN",
            minView:2,
            autoclose:true
        });

        $('#time-end').datetimepicker({
            format: 'yyyy-mm-dd',
            language:"zh-CN",
            minView:2,
            autoclose:true
        });
    </script>
@endsection
